<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .item {
      height: 100px;
      border: 1px solid pink;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  </style>
</head>

<body>
  <div class="list">
    <div class="item">美女</div>
    <div class="item">美女</div>
    <div class="item">美女</div>
    <div class="item">美女</div>
    <div class="item">美女</div>
    <div class="item">美女</div>
    <div class="item">美女</div>
    <div class="item">美女</div>
    <div class="item">美女</div>
    <div class="item">美女</div>
  </div>
  <!-- <script>
    // 1. 监听窗口滚动条的滚动事件
    window.addEventListener('scroll', function () {
      console.log('滚动条滚动了');
      // 2. 判读是否触底
      // 2.1 先得到网页还没有展示出来的内容的高度
      let html = document.documentElement
      const bd = html.scrollHeight - html.scrollTop - html.clientHeight
      // 2.2 判断是否小于等于100
      if (bd <= 100) {
        console.log('触底了');
        renderNext()
        // 为什么会出现问题，就是因为renderNext比较耗时，但是滚动事件触发频繁
        // 就导致 renderNext中的核心代码，在同一时间有多个正在执行
      }
    })

    // 2. 封装一个获取下一页数据，并渲染的函数
    let loading = false
    function renderNext() {
      // 模拟耗时操作
      if (loading) return
      loading = !loading
      // setTimeout(() => {
      //   // 1. 模拟获取后台给我们的美女数据
      //   const arr = ['美女1', '美女2', '美女3', '美女4', '美女5', '美女6', '美女7', '美女8', '美女9', '美女10']
      //   console.log(JSON.stringify(arr))
      //   // 2. 渲染
      //   const htmlStr = arr.map(item => `<div class="item">${item}</div>`).join('')
      //   console.log(htmlStr);
      //   document.querySelector('.list').insertAdjacentHTML('beforeend', htmlStr)
      //   loading = !loading
      // }, 1000)
      const xhr = new XMLHttpRequest()
      xhr.open('GET', 'http://localhost:3000/data')
      xhr.send()
      xhr.addEventListener('load', () => {
        if (xhr.status >= 200) {
          const Data = JSON.parse(xhr.responseText)
          const htmlStr = Data.map(item => `<div class="item">${item}</div>`).join('')
          document.querySelector('.list').insertAdjacentHTML('beforeend', htmlStr)
          loading = !loading
        }
      })
    }
  </script> -->

  <script>
    window.addEventListener('scroll', () => {
      const html = document.documentElement
      const surplus = html.scrollHeight - html.scrollTop - html.clientHeight
      if (surplus < 100) renderer()
    })

    let flag = true
    function renderer() {
      if (!flag) return
      flag = !flag
      const xhr = new XMLHttpRequest()
      xhr.open('GET', 'http://localhost:3000/data', true)
      xhr.send()
      xhr.addEventListener('load', () => {
        if (xhr.status >= 200) {
          const data = JSON.parse(xhr.responseText)
          const dataStr = data.map(item => `<div class="item">${item}</div>`).join('')
          document.querySelector('.list').insertAdjacentHTML('beforeend', dataStr)
          flag = !flag
        }
      })
    }
  </script>
</body>

</html>